<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-dialog v-model="dialogFormVisible" title="商品" width="600">
      <el-form :model="commodityForm" ref="commodityFormRef" :rules="rules" status-icon>
        <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="commodityForm.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth" prop="wdescribe">
          <el-input v-model="commodityForm.wdescribe" autocomplete="off" />
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="commodityForm.price" autocomplete="off" />
        </el-form-item>
        <el-form-item label="发货地id" :label-width="formLabelWidth" prop="shippingAddressId">
          <el-input v-model="commodityForm.shippingAddressId" autocomplete="off" disabled style="width: 328px;" />
          <el-button type="primary" style="margin-left: 16px" @click="openAddressChoose">
            选择地址下单
          </el-button>
          <address-choose @getAddressId="getAddressId" ref="addressChooseRef" />
        </el-form-item>
        <el-form-item label="店铺id" :label-width="formLabelWidth">
          <el-input v-model="commodityForm.shopId" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="库存" :label-width="formLabelWidth">
          <el-input v-model="commodityForm.number" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <el-button @click="resetForm(commodityFormRef)">
            取消
          </el-button>
          <el-button type="primary" @click="CUAddress(commodityFormRef)">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>
  
<script lang="ts" setup>
import { createCommodityByShopIdAndJwt, updateCommodityByIdAndJwt, getCommodityById } from "../../api/commodity/"
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import AddressChoose from './AddressChoose.vue';
// import { place } from '../api/object/'

// 打开地址选择页
const addressChooseRef = ref()
const openAddressChoose = () => {
  //子组件方法
  addressChooseRef.value.openDialog();
}

// 地址选择页传进值
const getAddressId = (addressId: number) => {
  commodityForm.shippingAddressId = addressId
}

// 要编辑的商品的id
// !当为0时调用新建商品方法 非0是调用编辑商品方法
const commodityId = ref(0);
//打开CommodityCU页
const dialogFormVisible = ref(false)
const openDialog = (id: number) => {
  dialogFormVisible.value = true
  commodityId.value = id
}
defineExpose({
  openDialog
})
// 指定字段宽度属性
const formLabelWidth = '100px'


// 商品表单
interface commodityType {
  id: number
  title: string,
  wdescribe: string,
  price: number,
  shippingAddressId: number,
  shopId: number,
  number: number
}
const commodityFormRef = ref<FormInstance>()
//创建商品表单数据
const commodityForm = reactive<commodityType>({
  id: 0,
  title: '',
  wdescribe: '',
  price: 0,
  shippingAddressId: 0,
  shopId: 0,
  number: 0
})
const rules = reactive<FormRules<commodityType>>({
  title: [
    { required: true, message: '请输入商品标题', trigger: 'blur' },
    { type: 'string', min: 1, max: 10, message: '长度1-10', trigger: 'blur' },
  ],
  wdescribe: [
    { required: true, message: '请输入商品描述', trigger: 'blur' },
    { type: 'string', min: 1, max: 100, message: '长度1-100', trigger: 'blur' },
    // { pattern: /(^(?!0$).*)/, message: '请选择省', trigger: 'change' }
  ],
  price: [
    { required: true, message: '请输入价格', trigger: 'blur' },
    // { type: 'number', message: '数字', trigger: 'blur' },
    // { pattern: /(^(?!0$).*)/, message: '请选择市', trigger: 'change' }
  ],
  shippingAddressId: [
    { required: true, message: '请选择发货地id', trigger: 'blur' },
    { type: 'number', message: '数字', trigger: 'blur' },
    // { pattern: /(^(?!0$).*)/, message: '请选择区', trigger: 'change' }
  ],
  number:[
    { required: true, message: '请输入库存', trigger: 'blur' },
    { type: 'number', message: '数字', trigger: 'blur' },
    // { pattern: /(^(?!0$).*)/, message: '请选择区', trigger: 'change' }
  ],
})
// 根据选择的订单获取值添加表单页面
watch(commodityId, (newVal, oldVal) => {
  if (commodityId.value != 0) {
    const getCommodityByIdResult = getCommodityById({ id: newVal })
    getCommodityByIdResult.then((res) => {
      if (res.code === 200) {
        //更改表单数据
        commodityForm.id = res.data.id
        commodityForm.title = res.data.title
        commodityForm.wdescribe = res.data.wdescribe
        commodityForm.price = res.data.price
        commodityForm.shippingAddressId = res.data.shippingAddressId
        commodityForm.shopId = res.data.shopId
        commodityForm.number = res.data.number
      } else {
        return ElMessage({
          showClose: true,
          message: res.message,
          type: 'error',
        })
      }
    })
  }
}, {
  // 深度监听
  deep: true,
  // 监听对象初次加载时也调用一次方法体
  // immediate: true
})
// CU地址
const CUAddress = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (commodityId.value == 0) {
        const createCommodityByJwtResult = createCommodityByShopIdAndJwt(commodityForm)
        createCommodityByJwtResult.then((res) => {
          if (res.code === 200) {
            dialogFormVisible.value = false
            return ElMessage({
              showClose: true,
              message: "创建商品成功",
              type: 'success',
            })
          } else {
            return ElMessage({
              showClose: true,
              message: res.message,
              type: 'error',
            })
          }
        })
      } else {
        const editCommodityByIdAndJwtResult = updateCommodityByIdAndJwt(commodityForm)
        editCommodityByIdAndJwtResult.then((res) => {
          if (res.code === 200) {
            dialogFormVisible.value = false
            return ElMessage({
              showClose: true,
              message: "编辑商品成功",
              type: 'success',
            })
          } else {
            return ElMessage({
              showClose: true,
              message: res.message,
              type: 'error',
            })
          }
        })
      }
    } else {
      return ElMessage({
        showClose: true,
        message: '请检查参数',
        type: 'error',
      })
    }
  })
}

//页面清空返回
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogFormVisible.value = false
}

</script>
  
<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
  